<template>
  <div class="wrap">
    <div class="root" flex="cross:center dir:top">
      <div class="title">TattooShow门票确认</div>
      <div flex="cross:center  main:center dir:top">
        <div class="row"><span class="label">验证码:</span><span class="content">{{id||'未获取到验证码'}}</span></div>
        <div class="row" v-if="succLoading"><span class="label">类型:</span><span
          class="content">{{type?'三日票':'单日票'}}</span></div>
        <div class="row" v-if="succLoading"><span class="label">状态:</span><span class="content">{{statusStr}}</span>
        </div>
        <div v-if="msg" class="msg">{{msg}}</div>

        <button v-if="succLoading&&status==0" @click="toUse">兑换</button>
      </div>
    </div>
    <div class="loading" v-if="isLoading" flex="cross:center main:center">
      <span>加载中...</span>
    </div>
  </div>
</template>

<script type="text/babel">
  import http from '../libs/http';

  export default {
    name: 'hello',
    data () {
      return {
        id: null,
        isLoading: false,
        type: 0,
        status: 0,
        succLoading: false,
        msg: null
      }
    },

    mounted(){
      this.isLoading = true;
      this.msg =null;
      let res = location.pathname.match(/\/p\/(.*)/);
      if (res)
        this.id = res[1];
      else
        this.id = 97190506;

      http.get({url: 'http://api.qicai.wenshendaka.com/exhibitionTicket', data: {redeem_code: this.id}}).then((res)=> {
        this.isLoading = false;
        if (res.code == 0) {
          this.succLoading = true;
          this.type = res.data._type;
          this.status = res.data.status;
        } else {
          this.msg = res.data.msg || '网络异常';
        }

      });
    },

    computed: {
      statusStr(){
        if (this.status == 1) {
          return '已兑换';
        }

        if (this.status == -1) {
          return '已失效';
        }

        if (this.status == 0) {
          return '可兑换';
        }
      }
    },

    methods: {
      toUse(){
        this.isLoading = true;
        this.msg =null;
        http.put({
          url: 'http://api.qicai.wenshendaka.com/exhibitionTicket/redeem',
          data: {redeem_code: this.id}
        }).then((res)=> {
          this.isLoading = false;
          if (res.code == 0) {
            this.succLoading = true;
            this.msg = '使用成功!';
            this.status = 1;
          } else {
            this.msg = res.msg || '网络异常';
          }

        });
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }

  .root {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
  }

  .label {
    width: 80px;
    margin-right: 10px;
    text-align: right;

    display: inline-block;
  }

  .row {
    width: 200px;
    height: 30px;
  }

  button {
    margin-top: 10px;
    height: 30px;
    width: 100px;
    background-color: #42b983;
    color: #fff;
  }

  .title {
    margin-top: 80px;
    margin-bottom: 40px;
    font-size: 20px;
  }

  .msg {
    color: #f00
  }
</style>
